<template>
  <div class="not-audited-list">
    <!--搜索区域-->
    <div class="row clearfix">
      <div class="col ">
        <div class="input-label">手机号</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchList.mobile" @keyup="checknumber" maxlength="11">
        </div>
      </div>
      <div class="col">
        <div class="input-label">关键词</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchList.keyword">
        </div>
      </div>
      <div class="col">
        <div class="input-label">发布日期</div>
        <div class="input-box">
          <Date-picker class="release-date" :value="searchList.createDate" @on-change="selectCreateDate"
                       format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期"></Date-picker>
        </div>
      </div>
    </div>

    <div class="row clearfix">
      <div class="col">
        <div class="input-label">用户类型</div>
        <div class="input-box">
          <Select v-model="searchList.userType" style="height: 40px;line-height:40px;">
            <Option v-for="item in userTypeList" :value="item.value" :key="item">{{ item.label }}</Option>
          </Select>
        </div>
      </div>
      <div class="col">
        <div class="input-label">所属专题</div>
        <div class="input-box">
          <Select v-model="searchList.subjectType" style="height: 40px;line-height:40px;">
            <Option v-for="item in subjectTypeList" :value="item.subjectId" :key="item.subjectId">{{ item.subjectName }}</Option>
          </Select>
        </div>
      </div>
      <div class="col" style="padding-left: 35px;">
        <div class="search-btn search" @click="pageNumChange(false)">查询</div>
        <div class="search-btn clear " @click="clearSearch">清空</div>
      </div>
    </div>
    <div class="sort-time" v-if="PendingAuditList.length>0">
      <Checkbox class="search-checkout is-desc" v-model="isAsc">按发布时间正序排列</Checkbox>
    </div>
    <!--列表-->
    <div class="allulitem" v-if="PendingAuditList.length>0">
      <div class="everyitem clearfix" v-for="item in PendingAuditList" >
        <div class="leftimg fl">
          <img :src="item.showImgUrl" alt="首图地址">
        </div>
        <div class="rightcontent fl">
          <p class="line6"><span class="subjectname" @click.stop="goToSubject(item)" v-if="item.subjectName">{{item.subjectName}}</span>{{item.content.replace(/[\r\n]/g,' ')}}</p>
          <div class="contenttextdown clearfix">
            <div class="col clearfix" style="padding-left: 0">
              <div class="titlecolor fl">
                <p>手机号：</p>
                <p>提交时间：</p>
                <p>图片数量：</p>
              </div>
              <div class="contentcolor fl">
                <p>{{item.mobile}}<i class="icon icon-authed" v-if="item.userType==1"></i></p>
                <p>{{item.createTime}}</p>
                <p>{{item.totalImg}}张</p>
              </div>
            </div>
          </div>
        </div>
        <div class="list-btn-group">
          <div class="list-btn" @click="viewReport(item)">查看详情</div>
        </div>
      </div>
    </div>
    <div class="allulitem list-nodata" v-if="PendingAuditList.length==0">
      暂无数据
    </div>
    <!--分页区域-->
    <div class="page" v-if="dataTotal>pageSize">
      <Page :total=dataTotal
            :pageSize=pageSize
            :current=pageNum
            @on-change="pageNumChange"
            show-total>
      </Page>
    </div>
    <!--提示框-->
    <Modal class="warning-modal"
           v-model="showWarnModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="warn-modal-body">
        <i class="modal-icon"></i>
        <p class="modal-content">{{warnContent}}</p>
      </div>
      <div slot="footer">
        <div class="warn-modal-footer">
          <span class="modal-close-btn" @click="closeModal">确定</span></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import index from  "./index.js"
  export default index ;
</script>
<style>
  .not-audited-list {
    padding: 43px 30px 0;
  }
  .subjectname{
    margin-right: 10px;
    color: #3F94FC;
    cursor: pointer;
  }
</style>
